<template>
    <div class="app_container">
        <el-button v-role="['/umsAdmin/add']" type="primary" @click="openAdd" style="margin-bottom: 10px;">新增管理员</el-button>

        <!-- 列表 -->
        <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="phone" label="账号" width="130"></el-table-column>
            <el-table-column prop="nickName" label="昵称" width="130"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="220"></el-table-column>
            <el-table-column label="角色" width="210">
                <template slot-scope="scope">
                    <div v-for="item in scope.row.roleList" :key="item.name">{{ item.name }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="note" label="备注" width="230"></el-table-column>
            <el-table-column prop="addtime" label="创建/更新时间" width="230">
                <template slot-scope="scope">
                    <div>创建时间：{{ scope.row.addtime }}</div>
                    <div>最近登录：{{ scope.row.loginTime }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template slot-scope="scope">{{ scope.row.status == 'ENABLED' ? '正常' : '已禁用' }}</template>
            </el-table-column>
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-dropdown placement="bottom-start" @command="openSet">
                        <el-button size="mini" type="primary" icon="el-icon-s-tools"></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-role="['/umsAdmin/update']" :command="{ type: 'edit', item: scope.row }">编辑</el-dropdown-item>
                            <el-dropdown-item v-role="['/umsAdmin/update']" :command="{ type: 'change_pwd', item: scope.row }">修改密码</el-dropdown-item>
                            <el-dropdown-item v-role="['/umsAdmin/update']" :command="{ type: 'toggle_status', item: scope.row }">{{ scope.row.status == 'ENABLED' ? '禁用' : '启用' }}</el-dropdown-item>
                            <el-dropdown-item v-role="['/umsAdmin/delete']" :command="{ type: 'del', item: scope.row }">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <br />

        <!-- 新增弹窗 -->
        <el-dialog :visible.sync="showAdd" title="增加管理员">
            <add-user @onCancel="showAdd = false" @onSubmit="onAddSubmit()"></add-user>
        </el-dialog>

        <!-- 编辑弹窗 -->
        <el-dialog :visible.sync="showEdit" title="编辑管理员">
            <edit-user :editItem="editItem" @onCancel="showEdit = false" @onSubmit="onEditSubmit()"></edit-user>
        </el-dialog>

        <!-- 修改密码弹窗 -->
        <el-dialog :visible.sync="showChangePwd" title="编辑管理员">
            <change-pwd :userId="userId" @onCancel="showChangePwd = false" @onSubmit="onChangePwd()"></change-pwd>
        </el-dialog>
    </div>
</template>

<script>
import { apiList, apiEdit, apiDel } from "@/api/admin.js";
import addUser from "./addUser.vue";
import editUser from "./editUser.vue";
import changePwd from "./changePwd.vue";
export default {
    name: 'admin_user_index',
    components: { addUser, editUser, changePwd },
    data() {
        return {
            tableData: [],
            form: {
                pageNum: 1, pageSize: 50
            },
            showAdd: false,
            showEdit: false,
            editItem: "",
            showChangePwd: false,
            userId: "",
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiList(this.form).then(res => {
                this.tableData = res.data;
            });
        },
        // 打开新增弹窗
        openAdd() {
            this.showAdd = true;
        },
        // 子组件确认新增
        onAddSubmit() {
            this.showAdd = false;
            this.getData();
        },
        // 子组件确认编辑
        onEditSubmit() {
            this.showEdit = false;
            this.getData();
        },
        // 子组件确认修改密码
        onChangePwd() {
            this.showChangePwd = false;
        },
        // 设置
        openSet({ type, item }) {
            switch (type) {
                case "edit":
                    this.editItem = item;
                    this.showEdit = true;
                    break;
                case "change_pwd":
                    this.userId = item.id;
                    this.showChangePwd = true;
                    break;
                case "toggle_status":
                    this.toggleStatus(item);
                    break;
                case "del":
                    this.delAdminUser(item);
                    break;
            }
        },
        // 禁用、启用
        toggleStatus(item) {
            this.$msgbox({
                title: "温馨提示",
                message: `${item.status == 'ENABLED' ? '禁用' : '启用'}管理员 ${item.nickName} ？`,
                showCancelButton: true,
                cancelButtonText: "取消",
                confirmButtonText: "确认",
            }).then(() => {
                apiEdit({ id: item.id, status: item.status == 'ENABLED' ? 'DISABLED' : 'ENABLED' }).then((res) => {
                    this.$message({ type: "success", message: res.message });
                    this.getData();
                }).catch((err) => {
                    console.log(err);
                    this.$message({ type: "error", message: err });
                });
            }).catch(() => {
                // 点击取消
            });
        },
        delAdminUser(item) {
            this.$msgbox({
                title: '温馨提示',
                message: `删除管理员 ${item.nickName} ？`,
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确认'
            }).then(() => {
                apiDel({ adminId: item.id }).then((res) => {
                    this.$message({ message: '操作成功', type: 'success' })
                    this.getData()
                })
            }).catch(() => {
                // 点击取消
            })
        },

    },
}
</script>

<style></style>